<template>
  <div id="background">
    <div id="logo">zhupp的智能客服</div>
    <div id="register">
      <el-card class="box-card">
        <div id="form">
          <p class="login-title">注册</p>
          <!-- 用户名输入框 -->
          <el-input v-model="username" placeholder="请输入用户名" style="margin-bottom: 10px;" />

          <!-- 邮箱输入框 -->
          <el-input
            v-model="email"
            placeholder="请输入邮箱"
            type="email"
            style="margin-bottom: 20px;"
          />

          <!-- 密码输入框 -->
          <el-input
            placeholder="请输入密码"
            v-model="password"
            show-password
            style="margin-bottom: 10px;"
          />

          <!-- 确认密码输入框 -->
          <el-input
            placeholder="请确认密码"
            v-model="confirmPassword"
            show-password
            style="margin-bottom: 10px;"
          />

          <!-- 注册按钮 -->
          <el-button
            type="primary"
            @click="register"
            style="width: 100%; margin-top: 10px;"
            >注册</el-button
          >

          <!-- 重置按钮 -->
          <el-button
            type="default"
            @click="resetForm"
            style="width: 100%; margin-top: 10px;"
            >重置</el-button
          >

          <!-- 提示已有账号，去登录 -->
          <div style="text-align: center; margin-top: 10px;">
            <span>已有账号？</span>
            <el-button
              type="text"
              @click="goToLogin"
              style="padding: 0; color: #ff4d4f; font-weight: bold;"
              >去登录</el-button
            >
          </div>
        </div>
      </el-card>
    </div>
    <div id="clock">
      <div id="time">{{ time }}</div>
      <div id="date">{{ date }}</div>
    </div>
    <div id="copyright">Copyright © 2024 zhupp. All Rights Reserved.</div>
  </div>
</template>

<script>

import axios from 'axios';
 
export default {
  name: 'LoginView',
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '', // 新增字段：确认密码
      email: '', // 新增字段：邮箱
      time: '',
      date: ''
    };
  },
  mounted() {
    this.$nextTick(() => {
      setInterval(this.update_clock, 1000);
    });
  },
  methods: {
    update_clock: function () {
      var d = new Date();
      var year = d.getFullYear();
      if (year < 10) {
        year = '0' + year;
      }
      var mon = d.getMonth() + 1;
      if (mon < 10) {
        mon = '0' + mon;
      }
      var day = d.getDate();
      if (day < 10) {
        day = '0' + day;
      }
      var hour = d.getHours();
      if (hour < 10) {
        hour = '0' + hour;
      }
      var minute = d.getMinutes();
      if (minute < 10) {
        minute = '0' + minute;
      }
      this.time = hour + ':' + minute;
      this.date = year + '/' + mon + '/' + day;
    },

    // 注册方法
    register() {
      if (!this.username || !this.password || !this.confirmPassword || !this.email) {
        this.$message.error('请填写所有字段');
        return;
      }

      if (this.password !== this.confirmPassword) {
        this.$message.error('密码和确认密码不一致');
        return;
      }

      // 向后端发送注册请求
      axios.post('http://localhost:5000/user/register', {
        username: this.username,
        email: this.email,
        password: this.password
      })
      .then(response => {
        if (response.data.message === "User registered successfully.") {
          this.$message.success('注册成功！');
          // 注册成功后跳转到登录页面
          this.$router.push('/login');
        }
        else if(response.data.message === 'Email already exists.'){
          this.$message.error('该邮箱已注册');
        }
      })
      .catch(error => {
        this.$message.error('注册失败，服务器错误');
        console.error(error);
      });
    },

    // 重置表单
    resetForm() {
      this.username = '';
      this.password = '';
      this.confirmPassword = '';
      this.email = '';
    },

    // 跳转到登录页面
    goToLogin() {
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
#background {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(90deg, cyan, purple);
  background-size: 400%;
  animation: myanimation 10s infinite;
}

@keyframes myanimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#logo {
  color: aliceblue;
  font-size: 25px;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  top: 15%;
  left: 15%;
}

#register {
  position: absolute;
  top: 30%;
  right: 15%; /* 改为5%距离右边，确保自适应 */
  width: 35%; /* 使用百分比宽度确保响应式布局 */
  max-width: 400px; /* 最大宽度限制，避免太大 */
  min-width: 200px;
}

.login-title {
  font-size: 32px; /* 增加字体大小 */
  padding: 0px;
  line-height: 10px;
  font-weight: bold;
  color: #fff;
  text-align: left;
  margin-bottom: 20px;
  margin-left: 10px;
}

.el-card {
  background-color: rgba(255, 255, 255, 0.6); /* 背景透明度 */
  border-radius: 15px;
  width: 100%;
  height: auto; /* 自动调整高度 */
}

#form {
  display: flex;
  flex-direction: column;
}

#clock {
  color: aliceblue;
  position: absolute;
  top: 70%;
  left: 15%;
  text-align: left;
}

#time {
  font-size: 100px;
}

#date {
  font-size: 35px;
}

#copyright {
  color: aliceblue;
  position: absolute;
  top: 95%;
  left: 38%;
}

/* 确保按钮和输入框有适当间距 */
.el-button {
  margin-top: 10px;
  margin-left: 0px;
}

.el-input {
  margin-bottom: 10px;
}

#form > div {
  margin-top: 15px;
}
</style>
